<template>
  <div class="home">
    <div class="navBar" @touchmove.prevent>
      <navBar>
        <template v-slot:center> 购物街 </template>
      </navBar>
    </div>
    <div class="tabControl2" v-show="showTab">
          <tabControl
            @tabClick="tabClick"
            :titles="['流行', '新款', '精选']"
            ref="tabControl2"
          ></tabControl>
        </div>
    <div class="scroll">
      <scroll
        ref="scroll"
        @isShowBT="isShowBT"
        @isShowTab="isShowTab"
        :probeType="3"
        @loadMore="loadMore"
        :pullUpLoad="true"
        :TBoffsetTop="TBoffsetTop"
      >
        <div class="swiper">
          <swiper
            :banner="banner"
            ref="swiper"
            @swiperLoad="swiperLoad"
          ></swiper>
        </div>

        <div class="homeR">
          <homeR :recommends="recommends"></homeR>
        </div>
        <div class="featureView">
          <featureView></featureView>
        </div>

        <div class="tabControl">
          <tabControl
            @tabClick="tabClick"
            :titles="['流行', '新款', '精选']"
            ref="tabControl"
          ></tabControl>
        </div>

        <goodsList :goods="goods[currentType].list"> </goodsList>
       <div class="loadMore flex f-a"> 上拉加载更多...</div>
      </scroll>
    </div>

    <div
      class="backTop"
      @click="$refs.scroll.bs.scrollTo(0, 0, 500)"
      v-if="showBT"
    >
      ↑
    </div>
  </div>
</template>

<script>
import navBar from "@/components/common/navBar/navBar.vue";
import swiper from "./homeSwiper";
import homeR from "./homeR";
import featureView from "./featureView";
import tabControl from "components/content/tabControl";
import goodsList from "@/components/content/goods/goodsList.vue";
import { getHomeMultidata, getHomeGoods } from "@/network/home.js";

import scroll from "./scroll.vue";

export default {
  name: "home",
  components: {
    navBar,
    swiper,
    homeR,
    featureView,
    tabControl,
    goodsList,
    scroll,
  },
  data() {
    return {
      banner: [
        { link: undefined },
        { link: undefined },
        { link: undefined },
        { link: undefined },
      ],
      recommends: [
        { link: undefined },
        { link: undefined },
        { link: undefined },
        { link: undefined },
      ],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType: "pop",
      showBT: false,
      TBoffsetTop: null,
      showTab:false
    };
  },

  created() {
    this.getHomeMultidata();
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell")
  },
  activated(){
    this.$refs.scroll.bs.refresh()
  },
  methods: {
    //网络请求
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banner = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      let page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        this.$refs.scroll.bs.finishPullUp();
      });
    },
    //监听事件
    tabClick(index) {
      this.$refs.tabControl.currentIndex=index
      this.$refs.tabControl2.currentIndex=index
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
    isShowBT(show) {
      this.showBT = show;
    },
    isShowTab() {
      this.showTab = this.$refs.scroll.showTab;
    },
    loadMore() {
      this.getHomeGoods(this.currentType);
    },
    swiperLoad() {
      
      this.TBoffsetTop = this.$refs.tabControl.$el.offsetTop;
    },
  },
  
};
</script>

<style scoped>
.navBar {
  background-color: rgb(255, 172, 186);
  box-shadow: 0 1px 1px rgba(177, 177, 177, 0.3);
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 999;
}
.scroll{
  margin-top:44px ;
}
.homeR {
  background-color: #fff;
  border-bottom: 10px #eee solid;
  padding: 10px 0;
}
.featureView {
  border-bottom: 10px #eee solid;
}
.tabControl {
  height: 44px;
  
  background-color: #fff;
}
.tabControl2 {
  height: 44px;
  position: fixed;
  padding: 0 5px;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #fff;
}
.backTop {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
  color: chocolate;
  position: fixed;
  bottom: 60px;
  right: 0;
  border-radius: 50%;
  background-color: #fff;
}
.loadMore{
        color: chocolate;
        margin-top:10px ;
    }
</style>